
#header {
  height: 60px;
  position: relative;
  border-bottom: @border-solid;
  z-index: 9;

  @media (min-width: @screen-phone) {
    height: 300px;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      #gradient > .vertical(transparent, fade(#000000, 80%));
      height: 60px;
    }
  }
}

#header-outer {
  height: 100%;
  max-width: 100%;
  padding: 0;
  position: relative;
}

#header-inner {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0 2% 0;
  z-index: 9;
  width: 100%;

  @media (min-width: @screen-phone) {
    padding: 8px 2% 0;
    #gradient > .vertical(fade(#000000, 80%), transparent);
  }
}

#banner {
  position: fixed;
  top: 0;
  left: 0;
  background: @bg-dark url('../image/blackbg.png') repeat;
  .size(100%, 60px);

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 60px;
    background: url('../image/headerbg.png') repeat-x;
    .size(100%, 29px);
  }

  @media (min-width: @screen-phone) {
    position: absolute;
    background: @bg-dark url('http://ww1.sinaimg.cn/large/9b71eb63gw1ej3b4c7t0aj217v0hsn1f.jpg') no-repeat 50% 100%;
    background-size: cover;
    height: 100%;

    &:after {
      top: 298px;
    }
  }
}

#header-title {
  position: fixed;
  top: 0;
  left: 50%;
  margin: 0 0 0 -82px;
  overflow: hidden;
  text-align: center;
  z-index: 10;
  width: 164px;

  @media (min-width: @screen-phone) {
    .transition-transform(.5s);
    position: relative;
    left: 0;
    margin: 99px 20% 0;
    width: 60%;

    &:hover,
    &:focus {
      .transform(rotate3d(0, 0, 1, -5deg) scale(1.2));
    }
  }
}

#logo,
#subtitle {
  text-decoration: none;
  color: @color-light-text;
  font-weight: 300;
  text-shadow: 0 1px .1em #000000;
  opacity: .6;

  &:hover,
  &:focus {
    background: none;
    text-shadow: 0 1px .1em fade(#000000, 60%), 0 1px .7em @color-light-text;
    opacity: 1;
  }
}

#logo {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  -webkit-transition: text-shadow .5s, opacity .5s;
  transition: text-shadow .5s, opacity .5s;

  @media (min-width: @screen-phone) {
    font-size: 40px;
  };

  &-wrap {
    margin: 6px 0 0;

    @media (min-width: @screen-phone) {
      margin: 20px 0 0;
    }
  }
}

#subtitle {
  display: none;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;

  @media (min-width: @screen-phone) {
    display: block;
  }
}

#subtitle-wrap {
  margin-top: 8px;
}

.main-nav,
#category-nav {
  float: left;

  .main-nav-link,
  .category-list-link {
    font-weight: 300;
    letter-spacing: 1px;
  }
}

.main-nav,
#category-nav,
#sub-nav {
  a,
  .nav-icon {
    -webkit-transition: -webkit-transform .5s, text-shadow .5s, opacity .5s, background-color .5s, color .5s, border-radius .5s;
    transition: transform .5s, text-shadow .5s, opacity .5s, background-color .5s, color .5s, border-radius .5s;
    text-shadow: 0 1px .1em #000000;

    &:hover,
    &:focus {
      background: fade(@color-light-text, 20%);
      border-radius: 1.6em;
      text-shadow: 0 1px .1em fade(#000000, 60%), 0 1px .6em @color-light-text;
    }
  }

  .nav-icon,
  .main-nav-link,
  .category-list-link {
    float: left;
    font-size: 18px;
    color: @color-light-text;
    opacity: .6;
    text-decoration: none;
    display: block;
    padding: 18px 20px;
    cursor: pointer;

    &:hover,
    &:focus {
      opacity: 1;
    }

    @media (min-width: @screen-phone) {
      padding: 20px;

      &:hover,
      &:focus {
        .translate3d(0, 6px, 0);
      }
    }
  }

  .nav-icon {
    padding: 18px 24px;
    text-align: center;
    cursor: pointer;

    @media (min-width: @screen-phone) {
      padding: 20px 24px;
    }
  }
}

#category-nav {
  .category-list {
    display: inline;
  }
  .category-list-item {
    display: inline-block;
    position: relative;
  }

  .category-list-child {
    position: absolute;
    display: none;
    top: 50px;
    width: 180px;
  }

  .category-list-item {
    &:hover,
    &:focus {
      .category-list-child {
        display: block;
      }
    }
  }

  .category-list-count {
    display: none;
  }
}

#sub-nav {
  float: right;
  width: 140px;
}

#search-form-wrap {
  position: absolute;
  right: 0;
  top: 70px;
  .transition-transform(.3s ease-in-out);
  .translate3d(100%, 0, 0);
  .size(82%, 50px);

  &.on {
    .translate3d(-11%, 0, 0);
  }

  @media screen and (min-width: @screen-phone) {
    width: 400px;
    .translate3d(400px, 0, 0);

    &.on {
      .translate3d(-30px, 0, 0);
    }
  }
}

.search-form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px 55px 5px 15px;
  border-radius: 1em;
  .box-shadow(0 0 10px fade(#000000, 30%));
  .bg-light;
}

.search-form-input {
  border: none;
  background: none;
  color: #000;
  width: 100%;
  outline: none;

  &::-webkit-search-results-decoration,
  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  @media (min-width: @screen-phone) {
    font-size: 24px;
  }
}

.search-form-submit {
  position: absolute;
  top: 50%;
  right: 0;
  margin: -22px 0 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  font-size: 24px;
  line-height: 44px;
  .size(60px, 44px);
  .hover-color(lighten(@color-gray-text, 20%), @color-light-text);

  &:hover,
  &:focus {
    text-shadow: 0 0 6px fade(#000000, 60%);
  }
}
